<template>
  <div class="hello">
    <logo :logoSrc='name'></logo>
    <p class="text">让人才管理更加轻松简单</p>
    <div class="content">
       <div class="ico">
           <img :src="logoSrc1">
           <h2>人才应聘</h2>
           <p>期待工作的城市？职位？薪资？</p>
           <p>让需求一目了然！</p>
       </div>
       <div class="ico">
           <img :src="logoSrc2">
           <h2>发布招聘</h2>
           <p>沟通不统一，信息难共享？</p>
           <p>提高招聘效率！</p>
       </div>
       <div class="ico">
           <img :src="logoSrc3">
           <h2>员工档案</h2>
           <p>错过栋梁之才，缺失档案库？</p>
           <p>让管理标准化！</p>
       </div>
    </div>
  </div>
</template>

<script>
import Logo from '../src/components/Logo'
export default {
  name: 'MyTeam',
  components:{
     Logo
  },
  data(){
    return{
        name:require('../src/image/logo1.png'),
        logoSrc1:require('../src/image/应聘职位.png'),
        logoSrc2:require('../src/image/招聘.png'),
        logoSrc3:require('../src/image/档案1.png')
    }
  },
}
</script>


<style lang="less" scoped>
@font-face{
            font-family: 'oswald';
            src : url('../src/assets/方正粗黑宋简体.TTF');
            //引用外部字体
        }
.hello{
    width: 100%;
    height: calc(100vh);
    background-image: url('/src/image/About.png');
    background-size: cover;
    overflow: hidden;
}
.text{
    font-family: oswald;
    width: 600px;
    text-align: center;
    margin: 20px auto;
    margin-top: 150px;
    font-size: 46px;
    letter-spacing: 10px;
    font-weight: 400;
    letter-spacing: 9px;
    overflow: hidden;
    white-space: nowrap;
    // color: #fff;
}
.content{
    width: 70%;
    margin: 0 auto;
    display:flex;
}
.ico img{
    width: 100px;
    height: 100px;
    margin: 0 auto;
}
.ico{
    font-family: oswald;
    padding: 10px;
    width: 18%;
    justify-content: space-around;
    margin: 40px auto;
    text-align: center;
    // background-color: #fff;

}
.ico img:hover{
    transform: rotate(13deg);
    transition: width 1s,height 1s,transform 1s;
}
.ico p{
    color: gray;
    font-size: 20px;
}
.ico h2{
    font-weight: 400;
    margin-bottom: 30px;
}
.ico h2:hover{
    transform:translate(0,2px);
    transition: width 1s,height .5s,transform 1s;
}
.ico p:hover,.ico h2:hover,.login:hover,.enroll:hover,li:hover{
    cursor: pointer;
}
</style>
